<template>
    <view class="page font14 col-3e bg-fff">
		<view class="statiscitsBox">
			<view class="title bg-theme col-fff font15">
                所有通话总数<text class="total font16 fontNum fontBold">{{total}}</text>
			</view>
			<view class="proressBox">
				<block v-for="(item, index) in list" :key="index">
					<view class="item font12 flex">
                        <image class="userHeader" :src="item.image" mode="scaleToFill"></image>
						<view class="titBox">
							<view class="">{{item.nickname}}</view>
                            <view class="date fontBold font16">{{item.phone | changePhone}}</view>
                            <view class="font12 col-grey">{{item.create_time}}</view>
						</view>
						<view class="callBtn flex">
                            <u-icon name="phone-fill" :color="item.phone?'#007235':'#8A8A8A'" size="20" @click="callBtn(item)"></u-icon>
						</view>
					</view>
				</block>
                <block v-if="loadingType === 'loading'">
                    <u-loadmore :status="loadingType" margin-top="10" />
                </block>
                <block v-else>
                    <view class="empty flex font13 col-grey">暂无更多</view>
                </block>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            adviserId: '',
            total: 0,
            list: [],
            next: '',
            loadingType: 'loadmore'
        }
    },
    onLoad(options) {
        let that = this;
        let { adviserId } = options;
        this.adviserId = adviserId;
        this.$u.mpShare = {
        	title: `顾问之家-通话记录`,
            path: `/pages/my/adviser/call-log?adviserId=${adviserId}`
        }
        uni.$check_and_login(function (){
            that.getData()
        })
    },
    filters:{
        changePhone(phone){
            return `${phone.slice(0, 3)}****${phone.slice(-4)}`
        }
    },
    onReachBottom() {
    	this.getData()
    },
    methods: {
        getData() {
            if(this.loadingType === 'loading' || this.loadingType === 'nomore'){
            	return;
            }
            
            this.loadingType = 'loading';
            let that = this;
            let url;
            if(this.next == '' || this.list.length == 0){
            	url = `/seller/mall/call/record/${this.adviserId}`
            }else{
            	url = this.next
            }
            this.$api.request({url: url}).then(res => {
                if(res.status == 0){
                    this.total = res.detail.count;
                    if(res.detail.results.length > 0) {
                        res.detail.results.forEach(item => {
                            this.list.push(item);
                        })
                    }
                    
                    this.next = res.detail.next;
                    if(this.next){
                    	this.loadingType = 'loadmore';
                    }else{
                    	this.loadingType = 'nomore';
                    }
                }else{
                    this.$common.msg(res.detail);
                }
                uni.stopPullDownRefresh();
            }).catch(err => {
                uni.stopPullDownRefresh();
            })
        },
        
        callBtn(info){
            if(info.phone == '') {
                uni.$u.toast('暂无联系方式');
                return
            }
            uni.makePhoneCall({
                phoneNumber: info.phone
            })
        }
    }
  }

</script>

<style scoped lang="scss">
	.page{
        line-height: 1;
        min-height: 100vh;
        overflow: hidden;
		.statiscitsBox{
			overflow: hidden;
			.title{
                padding: 20rpx 30rpx;
                .total{
                    margin-left: 10rpx;
                }
                .titleDesc{
                    margin-top: 20rpx;
                }
			}
			.proressBox{
				padding: 20rpx 20rpx 40rpx 20rpx;
				.item{
                    padding: 20rpx 0rpx;
					justify-content: space-between;
                    border-bottom: 1rpx solid rgba(0,0,0,.05);
                    &:last-child{
                        border: none;
                    }
                    .userHeader{
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                    }
					.titBox{
                        width: calc(100% - 240rpx);
                        .date{
                            margin: 15rpx 0rpx;
                        }
					}
                    .callBtn{
                        width: 100rpx;
                    }
				}
			}
		}
	}
</style>
